<template>
	<view class="mord">
		<view class="h1">
			请输入短信验证码
		</view>
		<view class="input">
			<view class="li">
				<image src="../../static/img/3/3-12.png" mode="widthFix"></image>
				<view class="x"></view>
				<input class="min" type="number" :value="val" @input="vals" placeholder="请输入验证码" />
				<view class="right rs" v-if="tim != 0">
					重新发送({{tim}})
				</view>
				<view class="right" @click="time" v-if="tim == 0">
					重新发送
				</view>
			</view>

		</view>
		<view class="next" @click="next">
			下一步
		</view>
		<view class="h2">
			遇到问题？<navigator url="">您可以联系客服</navigator>
		</view>
	</view>
</template>

<script>
	export default {
		name: "",
		components: {

		},
		data() {
			return {
				val: '',
				tim: 0,

			}
		},
		methods: {
			vals(e) {
				this.val = e.detail.value
			},

			next() {
				uni.navigateTo({
				    url: '/pages/login/next'
				})
			},
			time() {
				this.tim = 6;
				var that = this;
				var set=setInterval(function(){
					that.tim--
					if(that.tim<=0){
						clearInterval(set)
					}
				},1000);
			}
		}
		

	}
</script>

<style scoped>
	.next {
		display: block;
		width: 75%;
		margin: auto;
		height: 98rpx;
		background: rgba(240, 64, 111, 1);
		border-radius: 49rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(255, 255, 255, 1);
		text-align: center;
		line-height: 98rpx;
		margin-top: 77rpx;
	}

	.h2 {
		width: 65%;
		margin: auto;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #666666;
		text-align: left;
		margin-top: 44rpx
	}

	.h2 navigator {
		color: rgba(240, 64, 111, 1);
		display: initial;
	}
	.h1 {
		font-size: 48rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(0, 0, 0, 1);
		text-align: center;
		padding-top: 100rpx;
	}

	.input {
		width: 75%;
		margin: auto;
		/* margin-top: 100rpx; */
	}

	.input .p {
		text-align: right;
		font-size: 28rpx;
		color: #B7B7B7;
	}

	.input .li {
		border-bottom: 1px solid #CECECE;
		padding-bottom: 12rpx;
		margin-bottom: 45rpx;
		margin-top: 72rpx;
	}

	.input .li image {
		width: 26rpx;
		display: inline-block;
		vertical-align: middle;
	}

	.input .li input {
		display: inline-block;
		width: calc(100% - 90rpx);
		vertical-align: middle;
		margin-left: 21rpx;
		font-size: 30rpx;
		color: #B7B7B7;
		font-weight: normal;
	}

	.input .li .min {
		width: calc(100% - 130rpx - 136rpx);
	}

	.input .li .right {
		width: 176rpx;
		height: 54rpx;
		background: rgba(255, 230, 237, 1);
		border-radius: 27rpx;
		margin-left: 16rpx;
		display: inline-block;
		vertical-align: middle;
		font-size: 22rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(240, 64, 111, 1);
		text-align: center;
		line-height: 54rpx;
	}

	.input .li .rs {
		background: #CECECE;
		color: #fff;
	}

	.input .li .right .b {
		display: inline-block;
		width: 40rpx;
		text-align: center;

	}

	.input .li .right .b image {
		display: inline-block;
		width: 100%;
		vertical-align: middle;
	}

	.input .li .x {
		display: inline-block;
		vertical-align: middle;
		width: 1px;
		height: 30rpx;
		background: #E5E5E5;
		margin-left: 25rpx;
	}

	.input .li .right .but {
		font-size: 26rpx;
		width: calc(100% - 65rpx - 16rpx - 15rpx);
		margin-left: 25rpx;
		display: inline-block;
		vertical-align: middle;
		color: #8F8F94;
	}

	.input .p {
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(162, 162, 162, 1);
		margin-top: 44rpx;
		text-align: left;
	}
</style>
